<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            padding: 0;
        }
        
        ul>li{
            height: 20px;
            width:  170px;
            list-style: none;
            float: left;
            display: none;
        }
        ul>li:nth-of-type(1){
            background-color:green;
        }
        ul>li:nth-of-type(2){
            background-color: yellow;
        }
        ul>li:nth-of-type(3){
            background-color:red;
        }
        ul>li:nth-of-type(4){
            background-color:royalblue;
            color : red;
        }
        .li-active{
            display: block;
        }
    </style>
</head>
<body>
    <input type="text">
    <ul>
        <li class="li-active">密码强度--弱</li>
        <li>密码强度--中</li>
        <li>密码强度--强</li>
        <li>请输入6-8位的密码</li>
    </ul>
</body>
</html>
<script>
    $ = el => document.querySelector(el)
    var ul = $('ul')
    var input = $('input')
    input.oninput = function(){
        for(let i = 0 ; i < ul.children.length ; i++){
            ul.children[i].className = ''
        }

        if (!/^.{6,8}$/.test(input.value)) {
            ul.children[3].className = 'li-active'
            return
        }

        if (/[a-z]/.test(input.value) && /[A-Z]/.test(input.value) && /[0-9]/.test(input.value)) {
            ul.children[2].className = 'li-active'
        }else if (/[a-zA-Z]/.test(input.value) && /[0-9]/.test(input.value)) {
            ul.children[1].className = 'li-active'
        }else{
            ul.children[0].className = 'li-active'
        }
    }

</script>

<!-- 没啥重点，基础的正则的运用 -->